【译】让 linting 再一次伟大!

发表于 | 分类于

作为一个前端开发者我总是寻找一些可以使得反馈路径尽可能短的工具，而我相信 linting 会是其中一个。当然，有了 IDE 与文本编辑器的集成你一定用过它们。另一方面，还有那些云端代码质量工具，比如像是 CodeClimate 等一些工具，又或者是你自定义的 CI 工具，因而你大概也有用到。不过在这两者之间有一个小小的夹缝。

想象以下情形：你向代码仓库提交了一个 PR， 里面包含了一些类似检查启用与一些快速提交的代码。几分钟之后，在你已经进入另一个任务状态中的时候，你突然收到一份邮件说 CI 步骤失败了，而且很有可能是因为忘记了分号！切换任务，修复它，提交，等待 CI 通过…… “我希望我可以在提交改动到代码仓库 以前 lint 这份代码 ” - 我无数次这样想到。

但很可惜的是，即使是在有 IDE 集成 linting 的地方，也没有能阻止我和我的同事在不同的项目中提交了带有 linting 错误的代码。在多数时候这不都是一个大问题，然而在极少数的一些情况下，这会令我在这些提交后，反过来花费数小时去寻找 bug 。明明只要我们不允许推送这些 💩 代码到代码仓库中，这些浪费时间的行为就可以被轻易的阻止！

Pre-commit 钩子

“只要设置 Pre-commit 钩子就好了嘛” 你可能也想到这一点。至少我想到了，在 git 里面，你可以 “hook” 到工作流中几乎是任意的时间点上，运行自定义的脚本，无论是在提交，推送或者是合并的时候。这是一个非常有用但被低估的的工具，最有可能是因为它们：

  • 比较不容易去设置与管理
  • 几乎不可能在整个团队中共享它

这里有一个非常棒的pre-commit 包在 npm 上，来解决这些问题。它允许你在创建一个 commit 以前，运行任意来自你的 package.json 中指定的脚本。从这里可以看到，用它安装一个运行 ESLint 到所有 *.js 文件的 pre-commit hook 是多么容易

通常到这里就可以了，但是在大型项目中，这可能要花费相当长的一段时间来去跑完这些 linter。还有另一个问题是，这会显示所有的 linting 错误，而不仅仅只是文件中你改动过的部分。

针对提交中的改动文件使用 linter 不就是一个好的想法吗？这可以同时解决上面俩问题：通常来说，我们也不会在一次提交中推送过多文件（如果你是这样的人，请考虑分割你的提交为更加细小的提交）。而且这确实可以跟自定义的脚本协同工作，但是这样太过于乏味了。相反的，我更愿意在 package.json 中声明 pre-commit linting 配置以及其他的任务。

lint-staged 介绍

Lint-staged 是一个 Node.js 脚本，它允许你以最近暂存文件为目标，运行任意脚本。在 git 中，在你 “添加” 一个文件到一个提交当中以后，这个文件会处于“暂存”状态。这就允许你仔细的选择出那些将会进入到你下一个提交中的文件。

安装配置起来十分直截了当：

1
npm install --save-dev lint-staged pre-commit

然后添加一个带有glob模式匹配的命令列表，来匹配那些命令的目标：

1
2
3
4
5
6
7
// package.json
...
"lint-staged": {
 "*.js": "eslint",
 "*.css": "stylelint"
}
...

这就可以对最近暂存文件中的*.js 文件跑 ESLint， *.css 样式文件跑 stylelint。如果这些脚本中有任何检查失败 ，这个提交就会被拒绝。

并且因为这是使用了下面的 npm run 命令控制，它甚至可以从 package.json 中运行一些功能（举个例子，可以传递一些参数给 linters）。也就是说，如果你使用了 SCSS 语法，你就可以通过传递相应的参数给 stylelint，从而在 stylelint 中启用 scss 语法支持。下面是一份可供参考的配置：

1
2
3
4
5
6
7
8
9
10
11
12
// package.json
...
"scripts" {
 "lint-staged": "lint-staged",
 "stylelint-staged": "stylelint --syntax scss"
},
"lint-staged": {
 "*.js": "eslint",
 "*.scss": "stylelint-staged"
},
"pre-commit": "lint-staged"
...

lint-staged 的源码托管在GitHub上：https://github.com/okonet/lint-staged。如果你有什么问题或者建议，请提交 issue 或者给我发个 PR ，来让我了解你的想法。

lint-staged source code is on GitHub: https://github.com/okonet/lint-staged. If you have problems or suggestions, please open an issue or send me a PR and let me know what you think.

原文 https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8